
<p-growl [(value)]="msgs"></p-growl>
<p style="display: none">{{count}}</p>

<div class="container blog-content-container">
  <div class="row" *ngIf="blog==null">
    <p>正在加载</p>
    <div class="panel panel-default">
      <div class="panel-body">
        <button (click)="showMessage()">显示信息</button>
      </div>
    </div>

  </div>
  <div class="row" *ngIf="blog">

    <!-- Blog Entries Column -->
    <div class="col-md-8">
      <!-- Blog Post -->
      <div class="panel panel-default">
        <div class="panel-body">
          <h2 class="">
            <span>
              <a [routerLink]="['/post',blog.id]" [title]="blog.user.username">
                <img [src]="blog?.avatar?blog.avatar:'assets/images/avatar-default.jpg'" class="blog-avatar-50">
              </a>
            </span>
            <a [routerLink]="['/userspace',blog.user.username]" class="card-link" [title]="blog.user.username">
              {{blog?.title}}
            </a>
          </h2>
          <div class="">
            <a [routerLink]="['/userspace',blog.user.username]" class="card-link">{{blog?.user?.username}}&nbsp;&nbsp;&nbsp;</a>
            <i class="fa fa-eye" aria-hidden="true">{{blog?.readSize}}</i>
            <i class="fa fa-heart-o" aria-hidden="true">{{blog?.voteSize}}</i>
            <i class="fa fa-comment-o" aria-hidden="true">{{blog?.commentSize}}</i>
            <div *ngIf="userService.currentUser?.id==blog.user.id">
              <a [routerLink]="['/writeoreditpost',{id:blog?.id}]" class="btn btn-primary"
                 style="float:right;margin-left: 10px">编辑</a>
              <a class="btn btn-primary" style="float:right" (click)="deleteBlogById(blog?.id);">删除</a>
            </div>
          </div>
          <hr>
          <article class="post-content" [innerHTML]="blog?.htmlContent">

          </article>
          <hr>
        </div>
        <div class="panel-body">
          <h5>分类：
            <a>{{blog?.catalog?.name}}</a>
          </h5>

          <h5>标签：
            <a *ngFor="let tag of blog?.tags?.split(',')">
              <span class="badge badge-default">{{tag}}</span>
            </a>
          </h5>
        </div>


        <div class="panel-body" *ngIf="userService.currentUser!=null">
          <h5>评论：</h5>
          <div class="row">
            <div class="col-lg-12">
              <textarea class="blog-textarea" placeholder="看帖需留言~" id="commentContent" #commentContent></textarea>
            </div>
          </div>
          <button (click)="addComment(blog.id,commentContent.value);commentContent.value='';"
                  class="btn btn-primary float-right" id="submitComment" style="float:right;margin-left: 10px">发表评论
          </button>
          <button class="btn btn-primary float-right" id="submitVote" *ngIf="canVote" (click)="addVote(blog.id);"
                  style="float:right">点赞
          </button>
          <button class="btn btn-primary float-right" id="cancelVote" *ngIf="!canVote" (click)="deleteVote(blog.id);"
                  style="float:right">取消点赞
          </button>
        </div>
        <div class="panel-body" id="mainContainer">
          <div *ngFor="let comment of blog.comments;let i=index">
            <h2 class="panel-title col-lg-1 col-md-2">
                                    <span>
                          <a [routerLink]="['/userspace',comment.user.username]" [title]="comment.user.username">
                            <img [src]="comment.user.avatar?comment.user.avatar:'assets/images/avatar-default.jpg'"
                                 class="blog-avatar-50">
                          </a>
                      </span>
            </h2>
            <div class="card-text col-lg-11 col-md-10">
              <a [routerLink]="['/userspace',comment.user.username]" class="card-link">{{comment.user.username}}</a>
              {{i}}楼 {{comment.createTime}}
              <a (click)="deleteComment(blog.id,comment.id);" *ngIf="userService.currentUser?.id==comment.user.id">
                <i class="fa fa-trash-o" aria-hidden="true"></i>
              </a>
              <p>{{comment.content}}</p>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 右侧栏目 -->
    <div class="col-md-4">
      <div>
        <!-- 文章目录 -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <i class="fa fa-bars" aria-hidden="true"></i> 文章目录
            </h5>
          </div>
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item">
                <span class="badge">14</span>
                Cras justo odio
              </li>
              <li class="list-group-item">
                <span class="badge">14</span>
                Cras justo odio
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>

  </div>


</div>
